<%@ Page Language="C#" MasterPageFile="~/Common/WebSiteMaster.master" AutoEventWireup="true" CodeBehind="E_ToolkitScriptManager.aspx.cs" Inherits="ScottCateAjax2008.Lesson08.E_ToolkitScriptManager" Title="Toolkit ScriptManager" %>
<%@ Register Src="../UserControls/TimeLabelButton.ascx" TagName="TimeLabelButton" TagPrefix="uc1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <cc1:ToolkitScriptManager 
            ScriptMode="debug" 
            CombineScriptsHandlerUrl="~/Lesson08/E_CombineScriptsHandler.ashx"
            CombineScripts="true" 
            id="TSM" 
            runat="server">
        <Scripts>
        
        </Scripts>
    </cc1:ToolkitScriptManager>

    <p>
        This example mimics the functionality of <a href="C_UpdatePanelAnimationExtender.aspx">C_UpdatePanelAnimationExtender.aspx</a>
        but has a sutble differance. Instead of a ScriptManager, the page uses a ToolkitScriptManager. This
        is a control that inherits from ScriptManager, so it's perfectly valid as a replacement
        for the ScriptManager that you may have in your base page.
    </p>
    <p>
        The ToolkitScriptManager has a few properties of interest.
        <ul>
            <li>CombineScripts [true|false]</li>
            <li>CombineScriptsHandlerUrl [optional]</li>
        </ul>
        If you set CombineScripts to true, the Control Toolkit wil emit few scripts. This will directly 
        effect the number of scripts that need to be downloaded to the client. Becuase these scripts
        are compressed, when they're packaged together, the scripts take even less bandwidth then when
        downloaded sepaeratly. Can you say Win/Win ??? :)
    </p>
    <p>
        The CombineScriptHandlerUrl is optional, and the will result in a little less overhead for your
        scripts to be combined. Though the functionality is the same if you leave this field blank.
        If it's blank, the page name being rendered is used, and a set of query strings is added to the url.
        So the entire page load has to acutally happen twice without using a handler. The sample handler from 
        the Toolkit is included here as a sample. <a href="/Utilities/ShowServerCode.aspx?res=/Lesson08/E_CombineScriptsHandler.ashx">E_CombineScriptManager.ashx</a>
        and <a href="/Utilities/ShowServerCode.aspx?res=/Lesson08/E_CombineScriptsHandler.ashx.cs">{ashx.cs code}</a>
    </p>

    <asp:UpdatePanel ID="UP1" runat="server">
        <ContentTemplate>
            <uc1:TimeLabelButton ID="TimeLabelButton1" runat="server" DelayLoad="true" SecondsToDelay="3" />
        </ContentTemplate>
    </asp:UpdatePanel>

    <cc1:UpdatePanelAnimationExtender
        BehaviorID="animation"
        ID="UpdatePanelAnimationExtender1" runat="server"
        TargetControlID="UP1">
            <Animations>
                <OnUpdating>
                    <Sequence>
                        <%-- Store the original height of the panel --%>
                        <ScriptAction Script="var b = $find('animation');
                                //check the background color - if found store it
                                if(b._element.style.backgroundColor!='')
                                    {b._originalBackColor=b._element.style.backgroundColor;}
                                else{
                                    //check the parent for a background color;
                                    //this could be a recursive call up the chain
                                    //we're only going up one level, and calling it quits.
                                    var mask = 'Parent Background Color: {0}';
                                    var bgColor = b._element.parentElement.style.backgroundColor;
                                    Sys.Debug.trace(String.format(mask, bgColor));
                                    if(b._element.parentElement.style.backgroundColor!='')
                                        b._originalBackColor=b._element.parentElement.style.backgroundColor;
                                    else
                                        b._originalBackColor='#FFFFFF';
                                }
                                mask = 'Original Color is: {0}';
                                Sys.Debug.trace(String.format(mask, b._originalBackColor)); " />
                        <ScriptAction Script="var b = $find('animation');
                                b._originalHeight = b._element.offsetHeight;" />
                        
                        <%-- Disable all the controls --%>
                        <Parallel duration="0">
                            <EnableAction AnimationTarget="UP1" Enabled="false" />
                        </Parallel>
                        
                        <StyleAction Attribute="overflow" Value="hidden" />
                        
                        <%-- Do each of the selected effects --%>
                        <Parallel duration="1" Fps="30">
                            <FadeOut AnimationTarget="UP1" minimumOpacity=".2" />
                            <Resize Height="0" />
                            <Color AnimationTarget="UP1" PropertyKey="backgroundColor"
                                EndValue="#FF0000" StartValue="#40669A" />
                        </Parallel>
                    </Sequence>
                </OnUpdating>
                <OnUpdated>
                    <Sequence>
                        <%-- Do each of the selected effects --%>
                        <Parallel duration=".25" Fps="30">
                            <FadeIn AnimationTarget="UP1" minimumOpacity=".2" />
                            <Resize HeightScript="$find('animation')._originalHeight" />
                            <Color AnimationTarget="UP1" PropertyKey="backgroundColor"
                                    EndValueScript="$find('animation')._originalBackColor;"
                                    StartValue="#FF0000" />
                        </Parallel>
                        
                        <%-- Enable all the controls --%>
                        <Parallel duration="0">
                            <EnableAction AnimationTarget="UP1" Enabled="true" />
                        </Parallel>                            
                    </Sequence>
                </OnUpdated>
            </Animations>
    </cc1:UpdatePanelAnimationExtender>

</asp:Content>
